<html>
    <head>
        <meta charset='utf-8'>
        <title>学习页面</title>
        <style>
            * {
                margin: 0px;
                padding: 5px;
            }
            p{
                color: red;
                font-size: 20px;
            }
            .cgreen{
                color: green;
            }
            #h2_title{
                color: blue;
                font-size: 40px;
            }
        </style>
    </head>
    <body>
        <h1 class="cgreen">hello world</h1>
        <h2 id="h2_title">hello world</h2>
        <p>段落，<br/>
        在html中一般回车并不起作用，会被解释成一个空格，</p>但是br不一样，br标签的作用就是换行
        <br/><img src="./img.png" width="100px">
        <a href="https://www.baidu.com/">这是一个链接会跳转到百度</a>
        <br/>
        <ul class="cgreen">
            <li>ul/li是无序列表</li>
            <li>ul/li是无序列表</li>
        </ul>
        <ol>
            <li>ol/li是有序列表</li>
            <li>ol/li是有序列表</li>
        </ol>
        <dl>
            <dt>dl/dt是小标题</dt>
            <dd>dl/dd是围绕标题的描述</dd>
            <dd>dl/dd是围绕标题的描述</dd>
        </dl>

        <form action="http://47.109.48.199:8080/login" method="post">
            <input type="text" id="user" name="user">
            <input type="password" id="password" name="password">
            <input type="submit" name="submit" value="提交">

        </form>

        <button onclick="test()">按钮</button>

    </body>
    <script src="jquery-1.10.2.min.js"></script>
    <script>
        var ws = new WebSocket("ws://47.109.48.199:8080/ws");
        ws.onopen = function(){
            alert("ws 握手成功！！！");
        }
        ws.onerror = function()
        {
            alert("ws 连接出错");
        }
        ws.onclose = function(){
            alert("ws 连接断开");
        }
        ws.onmessage=function(evt){
            //alert(evt.data);
            var h2 = document.getElementById("h2_title");
            //alert(h2.innerHTML);
            h2.innerHTML = evt.data;
        }
        function test()
        {
            ws.send(document.getElementById("user").value);
            document.getElementById("user").value="";
            // var login_info = {
            //     user:document.getElementById("user").value,
            //     password:document.getElementById("password").value
            // }

            // $.ajax({
            //     type:"post",
            //     url:"http://47.109.48.199:8080/login",
            //     data:JSON.stringify(login_info),
            //     success:function(res,statu,xhr){
            //         alert(res);

            //     },
            //     error:function(xhr){
            //         alert(JSON.stringify(xhr));
            //     }
            // })

            // var input = document.getElementById("user");
            //alert("你好！！");
            // var h2 = document.getElementById("h2_title");
            // alert(h2.innerHTML);
            // h2.innerHTML = "hello dew";
            // var input = document.getElementById("user");
            // alert(input.value);
            // input.value="";
        }
    </script>
</html>
